<template>
  <PageSider :showFlag="false">
    <div class="left" v-if="treeData.length">
      <InputSearch
        v-model:value="searchValue"
        placeholder="请输入目录名称"
        style="margin-bottom: 8px"
        allowClear
        @search="onSearch"
      />
      <Tree
        v-bind="$attrs"
        defaultExpandAll
        :tree-data="dataInfo"
        @select="onSelect"
      >
        <template #title="{ name, projectId, parentId, children }">
          <div class="tree_title">
            <Space :size="8">
              <span>
                <span v-if="parentId !== null">
                  {{ findCodeInTree(dataInfo, 'name', name) }} -
                </span>
                <span>{{ name }}</span>
              </span>
              <Dropdown>
                <PlusOutlined class="ant-dropdown-link" />
                <template #overlay>
                  <Menu
                    destroyPopupOnHide
                    @click="onClick($event, projectId, parentId, name)"
                  >
                    <MenuItem key="edit" v-if="parentId !== null">
                      <span>修改目录信息</span>
                    </MenuItem>
                    <MenuItem key="add">
                      <span>新增子级目录</span>
                    </MenuItem>
                    <MenuItem
                      key="delete"
                      v-if="parentId !== null && !children"
                    >
                      <span>删除{{ children }}</span>
                    </MenuItem>
                  </Menu>
                </template>
              </Dropdown>
            </Space>
          </div>
        </template>
      </Tree>
    </div>
  </PageSider>
</template>

<script setup lang="tsx">
import { ref, watch } from 'vue';
import { PlusOutlined } from '@ant-design/icons-vue';
import {
  Dropdown,
  InputSearch,
  Menu,
  MenuItem,
  Modal,
  Space,
  Tree,
  message,
} from 'ant-design-vue';
import { cloneDeep } from 'lodash-es';
import PageSider from '@/components/PageSider/Index.vue';
import { filterTreeByName, findCodeInTree } from '@/utils/utils';

// const code = findCodeInTree(treeData.value, 'name', name);
const props = defineProps({
  treeData: {
    type: Array,
    default: () => [],
  },
});

const dataInfo = ref();
dataInfo.value = props.treeData;
const cloneData = ref(cloneDeep(dataInfo.value));
watch(
  () => props.treeData,
  (val) => {
    dataInfo.value = val;
    cloneData.value = cloneDeep(val);
  },
  { deep: true, immediate: false },
);
const emit = defineEmits(['select', 'edit', 'add', 'delete', 'editCode']);
const searchValue = ref<string>('');

const onSelect = (selectedKeys: any) => {
  emit('select', ...selectedKeys);
};

const onClick = ({ key }, projectId, parentId, name) => {
  emit(key, projectId, parentId, name);
};

const onSearch = (searchValue: string) => {
  if (!searchValue) dataInfo.value = cloneData.value;
  dataInfo.value = filterTreeByName(dataInfo.value, searchValue);
};
</script>

<style lang="scss" scoped>
.left {
  height: 100%;
  .tree_title {
    &:hover {
      .ant-dropdown-link {
        opacity: 1;
      }
    }
    .ant-dropdown-link {
      opacity: 0;
      font-size: 12px;
    }
  }
}
</style>
